<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>广告轮播</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="plugins/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="//at.alicdn.com/t/font_tnyc012u2rlwstt9.css" media="all" />
</head>
<style>
	.layui-table-cell {
		height: 80px;
		line-height: 80px;
		padding: 0 15px;
		position: relative;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		box-sizing: border-box;
	}
</style>
<body class="childrenBody">
<blockquote class="layui-elem-quote news_search">
	<form class="layui-form">
		<div class="layui-inline dynamicShow">
			<a class="layui-btn layui-btn-normal bannerAdd_btn">添加广告</a>
		</div>
	</form>

</blockquote>
<div class="layui-form news_list">
	<table class="layui-table" id="bannerList" lay-filter="bannerList"></table>
</div>
<div id="page"></div>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="plugins/layui/layui.all.js"></script>
<script type="text/html" id="sortDemo">
	<a class="layui-btn layui-btn-xs"lay-event="up" >上移</a>
	<a class="layui-btn layui-btn-xs" lay-event="down" >下移</a>
</script>
<script type="text/html" id="barDemo">
	<a class="layui-btn layui-btn-xs" lay-event="edit"><i class="iconfont icon-edit"></i>查看</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon"></i>删除</a>
</script>
<script type="text/javascript">
    layui.config({
        base : '/js/admin/'
    }).extend({
        ajaxExtention : 'ajaxExtention',//加载自定义扩展，每个业务js都需要加载这个ajax扩展
        $tool : 'tool'
    }).use([ 'table', 'form', '$tool', 'laydate' ], function(){
        var table = layui.table;
        var laydate = layui.laydate;
        var form = layui.form;
        $tool = layui.$tool;
        laydate.render({
            elem: '#test1'
        });
        var tableIns=table.render({
            elem: '#bannerList'
            ,url: '/banners'
            ,cols: [[
                {field:'imgUrl', title: '图片',width:"10%", templet:
                        function(d){
							  var img = '<img style="width: 80px;height: 80px;" src="'+d.imgUrl+'" alt="">';
                            return img;
                        }
                }
                ,{field:'bannerUrl', title: '链接',width:"40%"}
                ,{field:'sort',title: '操作', align:'center', toolbar: '#sortDemo',width:"25%"}
                ,{field:'operation',title: '操作', align:'center', toolbar: '#barDemo',width:"25%"}
            ]]
            ,id: 'testReload'
            ,page: true
        });
        table.on('tool(bannerList)', function(obj){
            var layEvent = obj.event;
            var ids=obj.data.id;
            if(layEvent === 'del'){ //删除
                layer.confirm('真的删除该banner图吗', function(index){
                    layer.close(index);
                    $.ajax({
                        type: "DELETE",
                        url:"/banners/delete/"+ids,
                        success: function(res) {
                            if(res.code==2000){
                                obj.del();
                                top.layer.close(index);
                                top.layer.msg("删除成功");
                            }else{
                                top.layer.msg(res.msg);
                            }
                        } ,
                        error: function(res) {
                            layer.msg("请求错误");
                        }
                    });
                });
            } else if(layEvent === 'edit'){ //编辑
                editProduct(ids);
            } else if(layEvent === 'up'){ //编辑
                upOrDown(ids,'up');
            }else if(layEvent === 'down'){ //编辑
                upOrDown(ids,'down');
            }
        });
        function upOrDown(ids,type) {
            $.ajax({
                type: "POST",
                url:"/banners/move",
				 data:{
                 id:ids,
                 type:type
				 },
                success: function(res) {
                    if(res.code==2000){
                        top.layer.msg("移动成功");
                        location.reload();
                    }else{
                        top.layer.msg(res.msg);
                    }
                } ,
                error: function(res) {
                    layer.msg("请求错误");
                }
            });
        }
        function editProduct(id){
            var index = layui.layer.open({
                title: "编辑服务产品",
                type: 2,
                area:["100%","100%"],
                content: "banner/bannerEdit.html?id="+id
            });
        }
        $(".bannerAdd_btn").click(function(){
            var index = layui.layer.open({
                title : "添加广告",
                area:["100%","100%"],
                type : 2,
                content : "banner/bannerAdd.html"
            })
        })
    });
</script>
</body>
</html>